<!--
@Description:公用头部
@Author:zqy
@Date:2022-10-20 16:41:03
@Last Modified by:zqy
@Last Modified time:2022-10-20 16:41:03
-->
<template>
  <div ref="comHeader" class="com-header" :class="{'color-w':whiteFont,'title-left':titleLeft && !arrow,'a-title-left':titleLeft && arrow}">
    <!-- <div v-if="showStatusbar" class="statusbar" :style="{'height':statusBarHeight+'px','background-color':titleBgColor}" /> -->
    <van-nav-bar :fixed="fixed" :z-index="999" placeholder :title="pageTitle" :border="border" :style="{'background-color':titleBgColor}">
      <div slot="left" class="left-bar" @click="pageBack">
        <template v-if="arrow">
          <svg-icon class="icon-back" icon-class="xiangzuo" />
        </template>
      </div>
      <template slot="right">
        <slot name="right">
          <more-close :black="black" @more="moreHandle" />
        </slot>
      </template>
    </van-nav-bar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import MoreClose from './MoreClose'
export default {
  name: 'ComHeader',
  components: {
    MoreClose
  },
  props: {
    fixed: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    }, // 是否显示下边框
    arrow: {
      type: Boolean,
      default: true
    }, // 是否显示左侧返回按钮
    title: {
      type: [String, Boolean],
      default: ''
    },
    whiteFont: {
      type: Boolean,
      default: false
    }, // 字体颜色是否为白色
    titleLeft: {
      type: Boolean,
      default: false
    }, // title是否居左
    black: {
      type: Boolean,
      default: true
    }, // 右侧按钮组是否为黑色
    showStatusbar: {
      type: Boolean,
      default: false
    }, // 是否显示包含状态栏(用于沉浸式)
    bgColor: {
      type: String,
      default: '#FAFBFE'
    }, // 背景色
    backFunc: {
      type: Function,
      default: null
    } // 返回函数
  },
  data() {
    return {
      searchValue: ''
    }
  },
  computed: {
    ...mapGetters(['direction', 'statusBarHeight']),
    headerTransition() {
      if (!this.direction) {
        return ''
      }
      return this.direction === 'forward'
        ? 'header-fade-in-right'
        : 'header-fade-in-left'
    },
    pageTitle() {
      if (this.title === false) {
        return ''
      }
      const title = this.$route.query.pageTitle
      return this.title || title || this.$route.meta.title
    },
    titleBgColor() {
      return this.bgColor || 'transparent'
    }
  },
  watch: {
    titleBgColor(v) {
      this.setHeadStyle()
    },
    showStatusbar: {
      handler(val) {
        this.setHeadStyle()
        this.getHeadHeight()
      },
      immediate: true
    },
    statusBarHeight() {
      this.setHeadStyle()
      this.getHeadHeight()
    }
  },
  mounted() {
    this.setHeadStyle()
    this.$nextTick(() => {
      this.getHeadHeight()
    })
    window.addEventListener('resize', () => {
      this.$nextTick(() => {
        this.getHeadHeight()
      })
    })
  },
  methods: {
    pageBack() {
      if (this.backFunc && this.backFunc instanceof Function) {
        this.backFunc()
        return
      }
      if (this.$route.query.isHome) {
        this.backOrigin()
        return
      }
      this.$router ? this.$router.back() : this.backOrigin()
    },
    backOrigin() {
      this.$nativeHandler('closeWeb', '')
    },
    setHeadStyle() {
      const p = this.$refs.comHeader && this.$refs.comHeader.querySelector('.van-nav-bar--fixed')
      if (p) {
        p.style.backgroundColor = this.titleBgColor
        p.style.paddingTop = this.showStatusbar ? `${this.statusBarHeight}px` : '0px'
      }
      this.getHeadHeight()
    },
    getHeadHeight() {
      const p = this.$refs.comHeader && this.$refs.comHeader.querySelector('.van-nav-bar')
      if (p) {
        const h = Math.ceil(p.offsetHeight)
        // const t = this.showStatusbar ? this.statusBarHeight : 0
        // this.$emit('get-height', h + t)
        // this.$emit('get-height', h + t)
        this.$emit('get-height', h)
      }
    },
    moreHandle() {
      this.$emit('more')
    }
  }
}
</script>
<style lang="less" scoped>
.com-header{
  z-index:999;
  .left-bar{
    display: flex;
    align-items: center;
    /deep/ .icon-back{
      margin-left: -10px;
    }
  }
  /deep/ .van-nav-bar{
    background-color: transparent;
  }
  /deep/ .van-nav-bar__title{
    font-weight: bold;
    letter-spacing: 1px;
    padding-right: 10px;
    box-sizing: border-box;
  }
  /deep/ .van-nav-bar__right{
    padding-right: 10px !important;
  }
  &.color-w{
    /deep/ .van-nav-bar{
      color: #fff;
    }
    /deep/ .van-nav-bar__title{
      color: #fff;
    }
  }
  &.title-left{
    /deep/ .van-nav-bar__title{
      text-align: left;
      flex: 1;
      margin: 0;
      padding-left: 16px;
      box-sizing: border-box;
    }
  }
  &.a-title-left{
    /deep/ .van-nav-bar__title{
      text-align: left;
      flex: 1;
      margin: 0;
      padding-left: 40px;
      box-sizing: border-box;
    }
  }
}
</style>
